<template>
  <div>
    <BasicTable @register="registerTable" :rowSelection="rowSelection">
      <template #tableTitle>
        <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleAdd" style="margin-right: 5px"> 新增 </a-button>

        <a-button type="primary" preIcon="ant-design:edit-outlined" @click="handleOpenGroup"> 分组管理 </a-button>
        <a-dropdown v-if="selectedRowKeys.length > 0">
          <template #overlay>
            <a-menu>
              <a-menu-item key="1" @click="batchHandleDelete">
                <Icon icon="i-ant-design:delete-outlined" />
                删除
              </a-menu-item>
            </a-menu>
          </template>
          <a-button
            >批量操作
            <Icon icon="i-mdi:chevron-down" />
          </a-button>
        </a-dropdown>
      </template>
      <template #shortUrl="{ record, text }">
        <a :href="record.shortUrl" target="_blank">{{ record.code }}</a>
      </template>
      <template #action="{ record }">
        <TableAction :actions="getTableActions(record)" :dropDownActions="getDropDownAction(record)" />
      </template>
    </BasicTable>
    <ShortLinkDrawer @register="registerDrawer" @success="reload" showFooter />
    <DetailDrawer @register="registerDetailDrawer" />
    <MyDataGroupList @register="registerGroupDrawer" @success="reload" :bizType="DataGroupBizType.SHORT_LINK" />
  </div>
</template>
<script lang="ts" name="short-link-list" setup>
  import { BasicTable, TableAction } from "/@/components/Table"
  import { useDrawer } from "/@/components/Drawer"
  import ShortLinkDrawer from "./ShortLinkDrawer.vue"
  import DetailDrawer from "./DetailDrawer.vue"
  import { listLink, deleteLink, batchDeleteLink, deleteGroup, batchDeleteGroup, saveOrUpdateGroup } from "./api"
  import { columns, searchFormSchema } from "./data"
  import { useListPage } from "/@/hooks/system/useListPage"
  import { useRouter } from "vue-router"
  import { Icon } from "/@/components/Icon"
  import { MyDataGroupList, DataGroupBizType } from "/@/components/BizDataGroup/index"

  const router = useRouter()
  const [registerDetailDrawer, { openDrawer: openDetailDrawer }] = useDrawer()
  const [registerGroupDrawer, { openDrawer: openGroupDrawer }] = useDrawer()
  const [registerDrawer, { openDrawer }] = useDrawer()

  const { tableContext } = useListPage({
    designScope: "shortlink",
    tableProps: {
      title: "短链列表",
      api: listLink,
      columns: columns,
      formConfig: {
        labelWidth: 120,
        schemas: searchFormSchema,
      },
      actionColumn: {
        width: 150,
        title: "操作",
        dataIndex: "action",
        fixed: "right",
        slots: { customRender: "action" },
      },
    },
  })

  const [registerTable, { reload, getForm }, { rowSelection, selectedRowKeys }] = tableContext

  function handlerAccessLog(record) {
    console.log("accessLog: ", record)
    router.push({
      name: `/shortLink/list/accessLog`,
      query: {
        code: record.code,
      },
    })
  }

  function getTableActions(record) {
    return [
      {
        label: "编辑",
        onClick: handleEdit.bind(null, record),
      },
      {
        label: "删除",
        color: "error",
        popConfirm: {
          title: "是否确认删除",
          confirm: handleDelete.bind(null, record),
        },
      },
    ]
  }

  const handlerDetail = (record) => {
    openDetailDrawer(true, {
      record,
    })
  }

  function getDropDownAction(record) {
    return [
      {
        label: "详情",
        onClick: handlerDetail.bind(null, record),
      },
      {
        label: "访问日志",
        onClick: handlerAccessLog.bind(null, record),
      },
      // {
      //   label: '拷贝短链',
      //   onClick: handleCopyLink.bind(null, record),
      // }
    ]
  }

  function handleAdd() {
    openDrawer(true, {
      isUpdate: false,
    })
  }

  function handleEdit(record) {
    openDrawer(true, {
      record,
      isUpdate: true,
    })
  }

  async function handleDelete(record) {
    await deleteLink({ id: record.id }, reload)
  }

  async function batchHandleDelete() {
    await batchDeleteLink({ ids: selectedRowKeys.value }, reload)
  }

  function handleOpenGroup() {
    openGroupDrawer(true, {
      title: "短链分组",
      width: 800,
      deleteApi: deleteGroup,
      batchDeleteApi: batchDeleteGroup,
      saveOrUpdateApi: saveOrUpdateGroup,
    })
  }
</script>
